<template>
  <cs-container :is-back-to-top="true">
    <div class="cs-p">
      <el-row>
        <el-col class="whiteList">
          白名单配置
        </el-col>
        <el-col>
          <div>
            <P>说明:</P>
            <P class="p">合法的IP格式：</P>
            <P class="p">※&nbsp;&nbsp;单个IP地址,如有多个地址请用逗号分隔: 例如:192.168.1.11,192.168.1.12</P>
            <P class="p">※&nbsp;&nbsp;IP地址范围 例如:192.168.1.100:192.168.1.200</P>
            <P class="p">※&nbsp;&nbsp;子网地址 例如:192.168.1.100/24</P>
          </div>
        </el-col>
        <el-col class="address">
          <label>地址:</label>
          <el-input size="small" v-model="name" placeholder="请输入合法IP格式"></el-input>
          <el-button size="small" type="primary">新增</el-button>
        </el-col>
      </el-row>
      <!-- 表格部分 -->
      <el-row class="tableArea">
        <cs-table :table-data="currentTableData"
                  :table-label="tableLabel"
                  @handleButton="handleButton"
                  @handleSortChange="handleSortChange"
                  @handleSelectionChange="handleSelectionChange"
                  :table-option="tableOption"
                  :isSelection="false">
        </cs-table>
        <!-- 分页区域 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-row>
    </div>
 </cs-container>
</template>

<script>
import CsTable from '@/components/cs-table'
export default {
  data() {
    return {
      name: '',
      currentTableData: [
        { address: '192.168.32.14', time: '2020-6-19', editTime: '2020-6-20' }
      ],
      tableLabel: [
        { label: '地址', param: 'address', align: 'left', sortable: true, isShow: true },
        { label: '创建时间', param: 'time', align: 'left', isShow: true },
        { label: '修改时间', param: 'editTime', align: 'left', sortable: false, isShow: true }
      ],
      tableOption: {
        label: '操作',
        width: '190',
        options: [
          { label: '编辑', type: 'primary', icon: 'el-icon-edit', methods: 'audit', auth: 'sys:group:update' },
          { label: '删除', type: 'danger', icon: 'el-icon-delete', methods: 'delete', auth: 'sys:group:delete' }
        ]
      },
      // 分页参数
      pageNo: 1,
      pageSize: 10,
      total: 0
    }
  },
  components: {
    CsTable
  },
  methods: {
    // 判断操作栏按钮
    handleButton(methods, row, index) {
      if (methods.methods === 'audit') {
        // 修改
        this.handleUpdate(methods.row)
      } else if (methods.methods === 'delete') {
        // 删除
        this.handleDelete(methods.index)
      }
    },
    handleSortChange() {
    },
    handleSelectionChange() {
    },
    // 删除
    handleDelete() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(333333)
      }).catch(() => {
      })
    },
    // 分页部分函数
    handleSizeChange() {
    },
    handleCurrentChange() {
    }
  }
}
</script>

<style scoped lang="scss">
  .p {
    font-size: 13px;
  }
  .whiteList {
    box-sizing: border-box;
    padding: 3px;
    border-bottom: #666666 1px solid;
  }
  .address {
    display: flex;
    justify-content: left;
    justify-items: center;
    margin-top: 10px;
    .el-input {
      width: 500px;
      margin-left: 15px;
    }
    .el-button {
      margin-left: 20px;
    }
  }
  .tableArea {
    margin-top: 30px;
    .el-pagination {
      margin-top: 10px;
    }
  }
</style>
